<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ thinkToString }}
        <br>
        {{ thinkPad }}
        <br>
        {{ iPad }}
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        let data={
            thinkToString: '手如柔荑，肤如凝脂',
            thinkPad: '领如蝤蛴，齿如瓠犀',
            iPad: '瞅瞅 这是一个iPad '
        }
        data.nickname='螓首蛾眉，巧笑倩兮，美目盼兮'

        let app = new Vue({
            el: '#app',
            data: data,
            mounted: function(){
                console.log('模型视图挂载完后');
            },
            created: function(){
                console.log('Vue实例初始化完后');
            },
            beforeUpdate: function(){
                console.log('数据更新之前')
                console.log(data);
            },
            updated: function(){
                console.log('数据更新之后');
                console.log(data);
            }
        });
        // console.log(app.beforeUpdated);
        document.write(data.nickname);
        console.log(app.$el);
        console.log(data);

        console.log(app.thinkToString === data.thinkToString);
    </script>
</body>
</html>